<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2460037" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe747;</span>
                <div class="name">icon-我的报表</div>
                <div class="code-name">&amp;#xe747;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe746;</span>
                <div class="name">icon-应用管理</div>
                <div class="code-name">&amp;#xe746;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe743;</span>
                <div class="name">icon-开发助手</div>
                <div class="code-name">&amp;#xe743;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe744;</span>
                <div class="name">icon-应用分析</div>
                <div class="code-name">&amp;#xe744;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe745;</span>
                <div class="name">icon-游戏专项分析</div>
                <div class="code-name">&amp;#xe745;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe742;</span>
                <div class="name">icon_探索分析</div>
                <div class="code-name">&amp;#xe742;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe732;</span>
                <div class="name">分组默认</div>
                <div class="code-name">&amp;#xe732;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe708;</span>
                <div class="name">添加列</div>
                <div class="code-name">&amp;#xe708;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe709;</span>
                <div class="name">导出</div>
                <div class="code-name">&amp;#xe709;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ff;</span>
                <div class="name">隐藏</div>
                <div class="code-name">&amp;#xe6ff;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fe;</span>
                <div class="name">可见</div>
                <div class="code-name">&amp;#xe6fe;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e2;</span>
                <div class="name">折线图</div>
                <div class="code-name">&amp;#xe6e2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e3;</span>
                <div class="name">柱状图</div>
                <div class="code-name">&amp;#xe6e3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e4;</span>
                <div class="name">下载</div>
                <div class="code-name">&amp;#xe6e4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e1;</span>
                <div class="name">编辑</div>
                <div class="code-name">&amp;#xe6e1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6df;</span>
                <div class="name">保存</div>
                <div class="code-name">&amp;#xe6df;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e0;</span>
                <div class="name">列表</div>
                <div class="code-name">&amp;#xe6e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6dd;</span>
                <div class="name">用户探索</div>
                <div class="code-name">&amp;#xe6dd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6dc;</span>
                <div class="name">行为探索</div>
                <div class="code-name">&amp;#xe6dc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe679;</span>
                <div class="name">wallet</div>
                <div class="code-name">&amp;#xe679;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67a;</span>
                <div class="name">people</div>
                <div class="code-name">&amp;#xe67a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67e;</span>
                <div class="name">workbench</div>
                <div class="code-name">&amp;#xe67e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe676;</span>
                <div class="name">assistant</div>
                <div class="code-name">&amp;#xe676;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe677;</span>
                <div class="name">send-one</div>
                <div class="code-name">&amp;#xe677;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe678;</span>
                <div class="name">application</div>
                <div class="code-name">&amp;#xe678;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67b;</span>
                <div class="name">setting</div>
                <div class="code-name">&amp;#xe67b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67c;</span>
                <div class="name">table-report</div>
                <div class="code-name">&amp;#xe67c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67d;</span>
                <div class="name">game</div>
                <div class="code-name">&amp;#xe67d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a1;</span>
                <div class="name">push marketing</div>
                <div class="code-name">&amp;#xe7a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a2;</span>
                <div class="name">user search</div>
                <div class="code-name">&amp;#xe7a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a3;</span>
                <div class="name">error report</div>
                <div class="code-name">&amp;#xe7a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a4;</span>
                <div class="name">shopping-cart</div>
                <div class="code-name">&amp;#xe7a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a5;</span>
                <div class="name">Hybrid</div>
                <div class="code-name">&amp;#xe7a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a6;</span>
                <div class="name">mail</div>
                <div class="code-name">&amp;#xe7a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a7;</span>
                <div class="name">phone</div>
                <div class="code-name">&amp;#xe7a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a8;</span>
                <div class="name">file</div>
                <div class="code-name">&amp;#xe7a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a9;</span>
                <div class="name">notifications</div>
                <div class="code-name">&amp;#xe7a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7aa;</span>
                <div class="name">settings-application</div>
                <div class="code-name">&amp;#xe7aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ab;</span>
                <div class="name">FlashAir</div>
                <div class="code-name">&amp;#xe7ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ac;</span>
                <div class="name">new</div>
                <div class="code-name">&amp;#xe7ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ad;</span>
                <div class="name">explore</div>
                <div class="code-name">&amp;#xe7ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ae;</span>
                <div class="name">download</div>
                <div class="code-name">&amp;#xe7ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7af;</span>
                <div class="name">push-settings</div>
                <div class="code-name">&amp;#xe7af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b0;</span>
                <div class="name">Cocos2D-x</div>
                <div class="code-name">&amp;#xe7b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b1;</span>
                <div class="name">behavior</div>
                <div class="code-name">&amp;#xe7b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b2;</span>
                <div class="name">authorization</div>
                <div class="code-name">&amp;#xe7b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b3;</span>
                <div class="name">Android</div>
                <div class="code-name">&amp;#xe7b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b4;</span>
                <div class="name">age-4</div>
                <div class="code-name">&amp;#xe7b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b5;</span>
                <div class="name">age-6</div>
                <div class="code-name">&amp;#xe7b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b6;</span>
                <div class="name">age-5</div>
                <div class="code-name">&amp;#xe7b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b7;</span>
                <div class="name">age-3</div>
                <div class="code-name">&amp;#xe7b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b8;</span>
                <div class="name">age-1</div>
                <div class="code-name">&amp;#xe7b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b9;</span>
                <div class="name">woman</div>
                <div class="code-name">&amp;#xe7b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ba;</span>
                <div class="name">unknow</div>
                <div class="code-name">&amp;#xe7ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7bb;</span>
                <div class="name">user</div>
                <div class="code-name">&amp;#xe7bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7bc;</span>
                <div class="name">age-2</div>
                <div class="code-name">&amp;#xe7bc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7bd;</span>
                <div class="name">rise</div>
                <div class="code-name">&amp;#xe7bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7be;</span>
                <div class="name">overview</div>
                <div class="code-name">&amp;#xe7be;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7bf;</span>
                <div class="name">drop</div>
                <div class="code-name">&amp;#xe7bf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c0;</span>
                <div class="name">man</div>
                <div class="code-name">&amp;#xe7c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c1;</span>
                <div class="name">removed</div>
                <div class="code-name">&amp;#xe7c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c2;</span>
                <div class="name">management</div>
                <div class="code-name">&amp;#xe7c2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c3;</span>
                <div class="name">top</div>
                <div class="code-name">&amp;#xe7c3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c4;</span>
                <div class="name">add</div>
                <div class="code-name">&amp;#xe7c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c5;</span>
                <div class="name">smart</div>
                <div class="code-name">&amp;#xe7c5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c6;</span>
                <div class="name">edit</div>
                <div class="code-name">&amp;#xe7c6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c7;</span>
                <div class="name">del</div>
                <div class="code-name">&amp;#xe7c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c8;</span>
                <div class="name">Details</div>
                <div class="code-name">&amp;#xe7c8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c9;</span>
                <div class="name">search</div>
                <div class="code-name">&amp;#xe7c9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ca;</span>
                <div class="name">Toolbox</div>
                <div class="code-name">&amp;#xe7ca;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7cb;</span>
                <div class="name">push</div>
                <div class="code-name">&amp;#xe7cb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7cc;</span>
                <div class="name">insight</div>
                <div class="code-name">&amp;#xe7cc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7cd;</span>
                <div class="name">form</div>
                <div class="code-name">&amp;#xe7cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ce;</span>
                <div class="name">analytics</div>
                <div class="code-name">&amp;#xe7ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7cf;</span>
                <div class="name">curve</div>
                <div class="code-name">&amp;#xe7cf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d0;</span>
                <div class="name">Unity3D</div>
                <div class="code-name">&amp;#xe7d0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d1;</span>
                <div class="name">reports</div>
                <div class="code-name">&amp;#xe7d1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d2;</span>
                <div class="name">date</div>
                <div class="code-name">&amp;#xe7d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d3;</span>
                <div class="name">help</div>
                <div class="code-name">&amp;#xe7d3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d4;</span>
                <div class="name">PhoneGap</div>
                <div class="code-name">&amp;#xe7d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d5;</span>
                <div class="name">funnel</div>
                <div class="code-name">&amp;#xe7d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d6;</span>
                <div class="name">Html5</div>
                <div class="code-name">&amp;#xe7d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d7;</span>
                <div class="name">IOS</div>
                <div class="code-name">&amp;#xe7d7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d8;</span>
                <div class="name">mini program</div>
                <div class="code-name">&amp;#xe7d8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d9;</span>
                <div class="name">question</div>
                <div class="code-name">&amp;#xe7d9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7da;</span>
                <div class="name">revoke</div>
                <div class="code-name">&amp;#xe7da;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7db;</span>
                <div class="name">set</div>
                <div class="code-name">&amp;#xe7db;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7dc;</span>
                <div class="name">show</div>
                <div class="code-name">&amp;#xe7dc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7dd;</span>
                <div class="name">sdk</div>
                <div class="code-name">&amp;#xe7dd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7de;</span>
                <div class="name">shake</div>
                <div class="code-name">&amp;#xe7de;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7df;</span>
                <div class="name">mini program-r</div>
                <div class="code-name">&amp;#xe7df;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e0;</span>
                <div class="name">windows-r</div>
                <div class="code-name">&amp;#xe7e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e1;</span>
                <div class="name">html5-r</div>
                <div class="code-name">&amp;#xe7e1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e2;</span>
                <div class="name">WindowsPhone</div>
                <div class="code-name">&amp;#xe7e2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e3;</span>
                <div class="name">iOS-r</div>
                <div class="code-name">&amp;#xe7e3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e4;</span>
                <div class="name">android-r</div>
                <div class="code-name">&amp;#xe7e4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e5;</span>
                <div class="name">eauth</div>
                <div class="code-name">&amp;#xe7e5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf25e;</span>
                <div class="name">快应用SDK</div>
                <div class="code-name">&amp;#xf25e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf30c;</span>
                <div class="name">ReactNative</div>
                <div class="code-name">&amp;#xf30c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf55a;</span>
                <div class="name">Flutter</div>
                <div class="code-name">&amp;#xf55a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf560;</span>
                <div class="name">collected</div>
                <div class="code-name">&amp;#xf560;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf561;</span>
                <div class="name">folder</div>
                <div class="code-name">&amp;#xf561;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf562;</span>
                <div class="name">Collect</div>
                <div class="code-name">&amp;#xf562;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf563;</span>
                <div class="name">collected</div>
                <div class="code-name">&amp;#xf563;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf564;</span>
                <div class="name">start calculating</div>
                <div class="code-name">&amp;#xf564;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf565;</span>
                <div class="name">check_box_px</div>
                <div class="code-name">&amp;#xf565;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf566;</span>
                <div class="name">check_box_outline_bl</div>
                <div class="code-name">&amp;#xf566;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf567;</span>
                <div class="name">radio_button_uncheck</div>
                <div class="code-name">&amp;#xf567;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf568;</span>
                <div class="name">radio_button_checked</div>
                <div class="code-name">&amp;#xf568;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf569;</span>
                <div class="name">start calculating</div>
                <div class="code-name">&amp;#xf569;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf56a;</span>
                <div class="name">restore</div>
                <div class="code-name">&amp;#xf56a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf56b;</span>
                <div class="name">time out</div>
                <div class="code-name">&amp;#xf56b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf56c;</span>
                <div class="name">file-1</div>
                <div class="code-name">&amp;#xf56c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf56d;</span>
                <div class="name">Check</div>
                <div class="code-name">&amp;#xf56d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf56e;</span>
                <div class="name">Cross</div>
                <div class="code-name">&amp;#xf56e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf56f;</span>
                <div class="name">Upload</div>
                <div class="code-name">&amp;#xf56f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf571;</span>
                <div class="name">file</div>
                <div class="code-name">&amp;#xf571;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf573;</span>
                <div class="name">Batch selection</div>
                <div class="code-name">&amp;#xf573;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf574;</span>
                <div class="name">customize</div>
                <div class="code-name">&amp;#xf574;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf31c;</span>
                <div class="name">sorter_down</div>
                <div class="code-name">&amp;#xf31c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf31d;</span>
                <div class="name">sorter_up</div>
                <div class="code-name">&amp;#xf31d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf33e;</span>
                <div class="name">constant</div>
                <div class="code-name">&amp;#xf33e;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1641885584264') format('woff2'),
       url('iconfont.woff?t=1641885584264') format('woff'),
       url('iconfont.ttf?t=1641885584264') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-icon-wodebaobiao"></span>
            <div class="name">
              icon-我的报表
            </div>
            <div class="code-name">.icon-icon-wodebaobiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-yingyongguanli"></span>
            <div class="name">
              icon-应用管理
            </div>
            <div class="code-name">.icon-icon-yingyongguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-kaifazhushou"></span>
            <div class="name">
              icon-开发助手
            </div>
            <div class="code-name">.icon-icon-kaifazhushou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-yingyongfenxi"></span>
            <div class="name">
              icon-应用分析
            </div>
            <div class="code-name">.icon-icon-yingyongfenxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-youxizhuanxiangfenxi"></span>
            <div class="name">
              icon-游戏专项分析
            </div>
            <div class="code-name">.icon-icon-youxizhuanxiangfenxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon_tansuofenxi"></span>
            <div class="name">
              icon_探索分析
            </div>
            <div class="code-name">.icon-icon_tansuofenxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fenzumoren"></span>
            <div class="name">
              分组默认
            </div>
            <div class="code-name">.icon-fenzumoren
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tianjialie"></span>
            <div class="name">
              添加列
            </div>
            <div class="code-name">.icon-tianjialie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daochu"></span>
            <div class="name">
              导出
            </div>
            <div class="code-name">.icon-daochu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yincang"></span>
            <div class="name">
              隐藏
            </div>
            <div class="code-name">.icon-yincang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kejian"></span>
            <div class="name">
              可见
            </div>
            <div class="code-name">.icon-kejian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhexiantu"></span>
            <div class="name">
              折线图
            </div>
            <div class="code-name">.icon-zhexiantu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuzhuangtu"></span>
            <div class="name">
              柱状图
            </div>
            <div class="code-name">.icon-zhuzhuangtu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiazai"></span>
            <div class="name">
              下载
            </div>
            <div class="code-name">.icon-xiazai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bianji"></span>
            <div class="name">
              编辑
            </div>
            <div class="code-name">.icon-bianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baocun"></span>
            <div class="name">
              保存
            </div>
            <div class="code-name">.icon-baocun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-liebiao"></span>
            <div class="name">
              列表
            </div>
            <div class="code-name">.icon-liebiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yonghutansuo"></span>
            <div class="name">
              用户探索
            </div>
            <div class="code-name">.icon-yonghutansuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hangweitansuo"></span>
            <div class="name">
              行为探索
            </div>
            <div class="code-name">.icon-hangweitansuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wallet"></span>
            <div class="name">
              wallet
            </div>
            <div class="code-name">.icon-wallet
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-people"></span>
            <div class="name">
              people
            </div>
            <div class="code-name">.icon-people
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-workbench"></span>
            <div class="name">
              workbench
            </div>
            <div class="code-name">.icon-workbench
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-assistant"></span>
            <div class="name">
              assistant
            </div>
            <div class="code-name">.icon-assistant
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-send-one"></span>
            <div class="name">
              send-one
            </div>
            <div class="code-name">.icon-send-one
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-application"></span>
            <div class="name">
              application
            </div>
            <div class="code-name">.icon-application
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-setting"></span>
            <div class="name">
              setting
            </div>
            <div class="code-name">.icon-setting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-table-report"></span>
            <div class="name">
              table-report
            </div>
            <div class="code-name">.icon-table-report
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-game"></span>
            <div class="name">
              game
            </div>
            <div class="code-name">.icon-game
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pushmarketing"></span>
            <div class="name">
              push marketing
            </div>
            <div class="code-name">.icon-pushmarketing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-usersearch"></span>
            <div class="name">
              user search
            </div>
            <div class="code-name">.icon-usersearch
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-errorreport"></span>
            <div class="name">
              error report
            </div>
            <div class="code-name">.icon-errorreport
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shopping-cart"></span>
            <div class="name">
              shopping-cart
            </div>
            <div class="code-name">.icon-shopping-cart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Hybrid"></span>
            <div class="name">
              Hybrid
            </div>
            <div class="code-name">.icon-Hybrid
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mail"></span>
            <div class="name">
              mail
            </div>
            <div class="code-name">.icon-mail
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-phone"></span>
            <div class="name">
              phone
            </div>
            <div class="code-name">.icon-phone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-file"></span>
            <div class="name">
              file
            </div>
            <div class="code-name">.icon-file
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-notifications"></span>
            <div class="name">
              notifications
            </div>
            <div class="code-name">.icon-notifications
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-settings-application"></span>
            <div class="name">
              settings-application
            </div>
            <div class="code-name">.icon-settings-application
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-FlashAir"></span>
            <div class="name">
              FlashAir
            </div>
            <div class="code-name">.icon-FlashAir
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-new"></span>
            <div class="name">
              new
            </div>
            <div class="code-name">.icon-new
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-explore"></span>
            <div class="name">
              explore
            </div>
            <div class="code-name">.icon-explore
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-download"></span>
            <div class="name">
              download
            </div>
            <div class="code-name">.icon-download
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-push-settings"></span>
            <div class="name">
              push-settings
            </div>
            <div class="code-name">.icon-push-settings
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-CocosD-x"></span>
            <div class="name">
              Cocos2D-x
            </div>
            <div class="code-name">.icon-CocosD-x
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-behavior"></span>
            <div class="name">
              behavior
            </div>
            <div class="code-name">.icon-behavior
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-authorization"></span>
            <div class="name">
              authorization
            </div>
            <div class="code-name">.icon-authorization
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Android"></span>
            <div class="name">
              Android
            </div>
            <div class="code-name">.icon-Android
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-age-"></span>
            <div class="name">
              age-4
            </div>
            <div class="code-name">.icon-age-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-age-1"></span>
            <div class="name">
              age-6
            </div>
            <div class="code-name">.icon-age-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-age-2"></span>
            <div class="name">
              age-5
            </div>
            <div class="code-name">.icon-age-2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-age-3"></span>
            <div class="name">
              age-3
            </div>
            <div class="code-name">.icon-age-3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-age-4"></span>
            <div class="name">
              age-1
            </div>
            <div class="code-name">.icon-age-4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-woman"></span>
            <div class="name">
              woman
            </div>
            <div class="code-name">.icon-woman
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-unknow"></span>
            <div class="name">
              unknow
            </div>
            <div class="code-name">.icon-unknow
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-user"></span>
            <div class="name">
              user
            </div>
            <div class="code-name">.icon-user
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-age-5"></span>
            <div class="name">
              age-2
            </div>
            <div class="code-name">.icon-age-5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rise"></span>
            <div class="name">
              rise
            </div>
            <div class="code-name">.icon-rise
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-overview"></span>
            <div class="name">
              overview
            </div>
            <div class="code-name">.icon-overview
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-drop"></span>
            <div class="name">
              drop
            </div>
            <div class="code-name">.icon-drop
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-man"></span>
            <div class="name">
              man
            </div>
            <div class="code-name">.icon-man
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-removed"></span>
            <div class="name">
              removed
            </div>
            <div class="code-name">.icon-removed
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-management"></span>
            <div class="name">
              management
            </div>
            <div class="code-name">.icon-management
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-top"></span>
            <div class="name">
              top
            </div>
            <div class="code-name">.icon-top
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-add"></span>
            <div class="name">
              add
            </div>
            <div class="code-name">.icon-add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smart"></span>
            <div class="name">
              smart
            </div>
            <div class="code-name">.icon-smart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-edit"></span>
            <div class="name">
              edit
            </div>
            <div class="code-name">.icon-edit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-del"></span>
            <div class="name">
              del
            </div>
            <div class="code-name">.icon-del
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Details"></span>
            <div class="name">
              Details
            </div>
            <div class="code-name">.icon-Details
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-search"></span>
            <div class="name">
              search
            </div>
            <div class="code-name">.icon-search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Toolbox"></span>
            <div class="name">
              Toolbox
            </div>
            <div class="code-name">.icon-Toolbox
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-push"></span>
            <div class="name">
              push
            </div>
            <div class="code-name">.icon-push
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-insight"></span>
            <div class="name">
              insight
            </div>
            <div class="code-name">.icon-insight
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-form"></span>
            <div class="name">
              form
            </div>
            <div class="code-name">.icon-form
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-analytics"></span>
            <div class="name">
              analytics
            </div>
            <div class="code-name">.icon-analytics
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-curve"></span>
            <div class="name">
              curve
            </div>
            <div class="code-name">.icon-curve
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-UnityD"></span>
            <div class="name">
              Unity3D
            </div>
            <div class="code-name">.icon-UnityD
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-reports"></span>
            <div class="name">
              reports
            </div>
            <div class="code-name">.icon-reports
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-date"></span>
            <div class="name">
              date
            </div>
            <div class="code-name">.icon-date
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-help"></span>
            <div class="name">
              help
            </div>
            <div class="code-name">.icon-help
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-PhoneGap"></span>
            <div class="name">
              PhoneGap
            </div>
            <div class="code-name">.icon-PhoneGap
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-funnel"></span>
            <div class="name">
              funnel
            </div>
            <div class="code-name">.icon-funnel
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Html"></span>
            <div class="name">
              Html5
            </div>
            <div class="code-name">.icon-Html
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-IOS"></span>
            <div class="name">
              IOS
            </div>
            <div class="code-name">.icon-IOS
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-miniprogram"></span>
            <div class="name">
              mini program
            </div>
            <div class="code-name">.icon-miniprogram
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-question"></span>
            <div class="name">
              question
            </div>
            <div class="code-name">.icon-question
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-revoke"></span>
            <div class="name">
              revoke
            </div>
            <div class="code-name">.icon-revoke
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-set"></span>
            <div class="name">
              set
            </div>
            <div class="code-name">.icon-set
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-show"></span>
            <div class="name">
              show
            </div>
            <div class="code-name">.icon-show
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sdk"></span>
            <div class="name">
              sdk
            </div>
            <div class="code-name">.icon-sdk
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shake"></span>
            <div class="name">
              shake
            </div>
            <div class="code-name">.icon-shake
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-miniprogram-r"></span>
            <div class="name">
              mini program-r
            </div>
            <div class="code-name">.icon-miniprogram-r
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-windows-r"></span>
            <div class="name">
              windows-r
            </div>
            <div class="code-name">.icon-windows-r
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-html-r"></span>
            <div class="name">
              html5-r
            </div>
            <div class="code-name">.icon-html-r
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-WindowsPhone"></span>
            <div class="name">
              WindowsPhone
            </div>
            <div class="code-name">.icon-WindowsPhone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-iOS-r"></span>
            <div class="name">
              iOS-r
            </div>
            <div class="code-name">.icon-iOS-r
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-android-r"></span>
            <div class="name">
              android-r
            </div>
            <div class="code-name">.icon-android-r
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-eauth"></span>
            <div class="name">
              eauth
            </div>
            <div class="code-name">.icon-eauth
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kuaiyingyongSDK"></span>
            <div class="name">
              快应用SDK
            </div>
            <div class="code-name">.icon-kuaiyingyongSDK
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ReactNative"></span>
            <div class="name">
              ReactNative
            </div>
            <div class="code-name">.icon-ReactNative
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Flutter"></span>
            <div class="name">
              Flutter
            </div>
            <div class="code-name">.icon-Flutter
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-collected"></span>
            <div class="name">
              collected
            </div>
            <div class="code-name">.icon-collected
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-folder"></span>
            <div class="name">
              folder
            </div>
            <div class="code-name">.icon-folder
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Collect"></span>
            <div class="name">
              Collect
            </div>
            <div class="code-name">.icon-Collect
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-collected1"></span>
            <div class="name">
              collected
            </div>
            <div class="code-name">.icon-collected1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-startcalculating"></span>
            <div class="name">
              start calculating
            </div>
            <div class="code-name">.icon-startcalculating
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-check_box_px"></span>
            <div class="name">
              check_box_px
            </div>
            <div class="code-name">.icon-check_box_px
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-check_box_outline_bl"></span>
            <div class="name">
              check_box_outline_bl
            </div>
            <div class="code-name">.icon-check_box_outline_bl
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-radio_button_uncheck"></span>
            <div class="name">
              radio_button_uncheck
            </div>
            <div class="code-name">.icon-radio_button_uncheck
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-radio_button_checked"></span>
            <div class="name">
              radio_button_checked
            </div>
            <div class="code-name">.icon-radio_button_checked
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-startcalculating1"></span>
            <div class="name">
              start calculating
            </div>
            <div class="code-name">.icon-startcalculating1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-restore"></span>
            <div class="name">
              restore
            </div>
            <div class="code-name">.icon-restore
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-timeout"></span>
            <div class="name">
              time out
            </div>
            <div class="code-name">.icon-timeout
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-file-1"></span>
            <div class="name">
              file-1
            </div>
            <div class="code-name">.icon-file-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Check"></span>
            <div class="name">
              Check
            </div>
            <div class="code-name">.icon-Check
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Cross"></span>
            <div class="name">
              Cross
            </div>
            <div class="code-name">.icon-Cross
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Upload"></span>
            <div class="name">
              Upload
            </div>
            <div class="code-name">.icon-Upload
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-file1"></span>
            <div class="name">
              file
            </div>
            <div class="code-name">.icon-file1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Batchselection"></span>
            <div class="name">
              Batch selection
            </div>
            <div class="code-name">.icon-Batchselection
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-customize"></span>
            <div class="name">
              customize
            </div>
            <div class="code-name">.icon-customize
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sorter_down"></span>
            <div class="name">
              sorter_down
            </div>
            <div class="code-name">.icon-sorter_down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sorter_up"></span>
            <div class="name">
              sorter_up
            </div>
            <div class="code-name">.icon-sorter_up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-constant"></span>
            <div class="name">
              constant
            </div>
            <div class="code-name">.icon-constant
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-wodebaobiao"></use>
                </svg>
                <div class="name">icon-我的报表</div>
                <div class="code-name">#icon-icon-wodebaobiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-yingyongguanli"></use>
                </svg>
                <div class="name">icon-应用管理</div>
                <div class="code-name">#icon-icon-yingyongguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-kaifazhushou"></use>
                </svg>
                <div class="name">icon-开发助手</div>
                <div class="code-name">#icon-icon-kaifazhushou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-yingyongfenxi"></use>
                </svg>
                <div class="name">icon-应用分析</div>
                <div class="code-name">#icon-icon-yingyongfenxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-youxizhuanxiangfenxi"></use>
                </svg>
                <div class="name">icon-游戏专项分析</div>
                <div class="code-name">#icon-icon-youxizhuanxiangfenxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon_tansuofenxi"></use>
                </svg>
                <div class="name">icon_探索分析</div>
                <div class="code-name">#icon-icon_tansuofenxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fenzumoren"></use>
                </svg>
                <div class="name">分组默认</div>
                <div class="code-name">#icon-fenzumoren</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tianjialie"></use>
                </svg>
                <div class="name">添加列</div>
                <div class="code-name">#icon-tianjialie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daochu"></use>
                </svg>
                <div class="name">导出</div>
                <div class="code-name">#icon-daochu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yincang"></use>
                </svg>
                <div class="name">隐藏</div>
                <div class="code-name">#icon-yincang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kejian"></use>
                </svg>
                <div class="name">可见</div>
                <div class="code-name">#icon-kejian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhexiantu"></use>
                </svg>
                <div class="name">折线图</div>
                <div class="code-name">#icon-zhexiantu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuzhuangtu"></use>
                </svg>
                <div class="name">柱状图</div>
                <div class="code-name">#icon-zhuzhuangtu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiazai"></use>
                </svg>
                <div class="name">下载</div>
                <div class="code-name">#icon-xiazai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianji"></use>
                </svg>
                <div class="name">编辑</div>
                <div class="code-name">#icon-bianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baocun"></use>
                </svg>
                <div class="name">保存</div>
                <div class="code-name">#icon-baocun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-liebiao"></use>
                </svg>
                <div class="name">列表</div>
                <div class="code-name">#icon-liebiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yonghutansuo"></use>
                </svg>
                <div class="name">用户探索</div>
                <div class="code-name">#icon-yonghutansuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hangweitansuo"></use>
                </svg>
                <div class="name">行为探索</div>
                <div class="code-name">#icon-hangweitansuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wallet"></use>
                </svg>
                <div class="name">wallet</div>
                <div class="code-name">#icon-wallet</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-people"></use>
                </svg>
                <div class="name">people</div>
                <div class="code-name">#icon-people</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-workbench"></use>
                </svg>
                <div class="name">workbench</div>
                <div class="code-name">#icon-workbench</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-assistant"></use>
                </svg>
                <div class="name">assistant</div>
                <div class="code-name">#icon-assistant</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-send-one"></use>
                </svg>
                <div class="name">send-one</div>
                <div class="code-name">#icon-send-one</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-application"></use>
                </svg>
                <div class="name">application</div>
                <div class="code-name">#icon-application</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-setting"></use>
                </svg>
                <div class="name">setting</div>
                <div class="code-name">#icon-setting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-table-report"></use>
                </svg>
                <div class="name">table-report</div>
                <div class="code-name">#icon-table-report</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-game"></use>
                </svg>
                <div class="name">game</div>
                <div class="code-name">#icon-game</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pushmarketing"></use>
                </svg>
                <div class="name">push marketing</div>
                <div class="code-name">#icon-pushmarketing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-usersearch"></use>
                </svg>
                <div class="name">user search</div>
                <div class="code-name">#icon-usersearch</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-errorreport"></use>
                </svg>
                <div class="name">error report</div>
                <div class="code-name">#icon-errorreport</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shopping-cart"></use>
                </svg>
                <div class="name">shopping-cart</div>
                <div class="code-name">#icon-shopping-cart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Hybrid"></use>
                </svg>
                <div class="name">Hybrid</div>
                <div class="code-name">#icon-Hybrid</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mail"></use>
                </svg>
                <div class="name">mail</div>
                <div class="code-name">#icon-mail</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-phone"></use>
                </svg>
                <div class="name">phone</div>
                <div class="code-name">#icon-phone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-file"></use>
                </svg>
                <div class="name">file</div>
                <div class="code-name">#icon-file</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-notifications"></use>
                </svg>
                <div class="name">notifications</div>
                <div class="code-name">#icon-notifications</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-settings-application"></use>
                </svg>
                <div class="name">settings-application</div>
                <div class="code-name">#icon-settings-application</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-FlashAir"></use>
                </svg>
                <div class="name">FlashAir</div>
                <div class="code-name">#icon-FlashAir</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-new"></use>
                </svg>
                <div class="name">new</div>
                <div class="code-name">#icon-new</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-explore"></use>
                </svg>
                <div class="name">explore</div>
                <div class="code-name">#icon-explore</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-download"></use>
                </svg>
                <div class="name">download</div>
                <div class="code-name">#icon-download</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-push-settings"></use>
                </svg>
                <div class="name">push-settings</div>
                <div class="code-name">#icon-push-settings</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-CocosD-x"></use>
                </svg>
                <div class="name">Cocos2D-x</div>
                <div class="code-name">#icon-CocosD-x</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-behavior"></use>
                </svg>
                <div class="name">behavior</div>
                <div class="code-name">#icon-behavior</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-authorization"></use>
                </svg>
                <div class="name">authorization</div>
                <div class="code-name">#icon-authorization</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Android"></use>
                </svg>
                <div class="name">Android</div>
                <div class="code-name">#icon-Android</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-age-"></use>
                </svg>
                <div class="name">age-4</div>
                <div class="code-name">#icon-age-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-age-1"></use>
                </svg>
                <div class="name">age-6</div>
                <div class="code-name">#icon-age-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-age-2"></use>
                </svg>
                <div class="name">age-5</div>
                <div class="code-name">#icon-age-2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-age-3"></use>
                </svg>
                <div class="name">age-3</div>
                <div class="code-name">#icon-age-3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-age-4"></use>
                </svg>
                <div class="name">age-1</div>
                <div class="code-name">#icon-age-4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-woman"></use>
                </svg>
                <div class="name">woman</div>
                <div class="code-name">#icon-woman</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-unknow"></use>
                </svg>
                <div class="name">unknow</div>
                <div class="code-name">#icon-unknow</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-user"></use>
                </svg>
                <div class="name">user</div>
                <div class="code-name">#icon-user</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-age-5"></use>
                </svg>
                <div class="name">age-2</div>
                <div class="code-name">#icon-age-5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rise"></use>
                </svg>
                <div class="name">rise</div>
                <div class="code-name">#icon-rise</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-overview"></use>
                </svg>
                <div class="name">overview</div>
                <div class="code-name">#icon-overview</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-drop"></use>
                </svg>
                <div class="name">drop</div>
                <div class="code-name">#icon-drop</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-man"></use>
                </svg>
                <div class="name">man</div>
                <div class="code-name">#icon-man</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-removed"></use>
                </svg>
                <div class="name">removed</div>
                <div class="code-name">#icon-removed</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-management"></use>
                </svg>
                <div class="name">management</div>
                <div class="code-name">#icon-management</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-top"></use>
                </svg>
                <div class="name">top</div>
                <div class="code-name">#icon-top</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-add"></use>
                </svg>
                <div class="name">add</div>
                <div class="code-name">#icon-add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smart"></use>
                </svg>
                <div class="name">smart</div>
                <div class="code-name">#icon-smart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-edit"></use>
                </svg>
                <div class="name">edit</div>
                <div class="code-name">#icon-edit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-del"></use>
                </svg>
                <div class="name">del</div>
                <div class="code-name">#icon-del</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Details"></use>
                </svg>
                <div class="name">Details</div>
                <div class="code-name">#icon-Details</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-search"></use>
                </svg>
                <div class="name">search</div>
                <div class="code-name">#icon-search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Toolbox"></use>
                </svg>
                <div class="name">Toolbox</div>
                <div class="code-name">#icon-Toolbox</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-push"></use>
                </svg>
                <div class="name">push</div>
                <div class="code-name">#icon-push</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-insight"></use>
                </svg>
                <div class="name">insight</div>
                <div class="code-name">#icon-insight</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-form"></use>
                </svg>
                <div class="name">form</div>
                <div class="code-name">#icon-form</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-analytics"></use>
                </svg>
                <div class="name">analytics</div>
                <div class="code-name">#icon-analytics</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-curve"></use>
                </svg>
                <div class="name">curve</div>
                <div class="code-name">#icon-curve</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-UnityD"></use>
                </svg>
                <div class="name">Unity3D</div>
                <div class="code-name">#icon-UnityD</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-reports"></use>
                </svg>
                <div class="name">reports</div>
                <div class="code-name">#icon-reports</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-date"></use>
                </svg>
                <div class="name">date</div>
                <div class="code-name">#icon-date</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-help"></use>
                </svg>
                <div class="name">help</div>
                <div class="code-name">#icon-help</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-PhoneGap"></use>
                </svg>
                <div class="name">PhoneGap</div>
                <div class="code-name">#icon-PhoneGap</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-funnel"></use>
                </svg>
                <div class="name">funnel</div>
                <div class="code-name">#icon-funnel</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Html"></use>
                </svg>
                <div class="name">Html5</div>
                <div class="code-name">#icon-Html</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-IOS"></use>
                </svg>
                <div class="name">IOS</div>
                <div class="code-name">#icon-IOS</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-miniprogram"></use>
                </svg>
                <div class="name">mini program</div>
                <div class="code-name">#icon-miniprogram</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-question"></use>
                </svg>
                <div class="name">question</div>
                <div class="code-name">#icon-question</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-revoke"></use>
                </svg>
                <div class="name">revoke</div>
                <div class="code-name">#icon-revoke</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-set"></use>
                </svg>
                <div class="name">set</div>
                <div class="code-name">#icon-set</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-show"></use>
                </svg>
                <div class="name">show</div>
                <div class="code-name">#icon-show</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sdk"></use>
                </svg>
                <div class="name">sdk</div>
                <div class="code-name">#icon-sdk</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shake"></use>
                </svg>
                <div class="name">shake</div>
                <div class="code-name">#icon-shake</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-miniprogram-r"></use>
                </svg>
                <div class="name">mini program-r</div>
                <div class="code-name">#icon-miniprogram-r</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-windows-r"></use>
                </svg>
                <div class="name">windows-r</div>
                <div class="code-name">#icon-windows-r</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-html-r"></use>
                </svg>
                <div class="name">html5-r</div>
                <div class="code-name">#icon-html-r</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-WindowsPhone"></use>
                </svg>
                <div class="name">WindowsPhone</div>
                <div class="code-name">#icon-WindowsPhone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iOS-r"></use>
                </svg>
                <div class="name">iOS-r</div>
                <div class="code-name">#icon-iOS-r</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-android-r"></use>
                </svg>
                <div class="name">android-r</div>
                <div class="code-name">#icon-android-r</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-eauth"></use>
                </svg>
                <div class="name">eauth</div>
                <div class="code-name">#icon-eauth</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kuaiyingyongSDK"></use>
                </svg>
                <div class="name">快应用SDK</div>
                <div class="code-name">#icon-kuaiyingyongSDK</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ReactNative"></use>
                </svg>
                <div class="name">ReactNative</div>
                <div class="code-name">#icon-ReactNative</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Flutter"></use>
                </svg>
                <div class="name">Flutter</div>
                <div class="code-name">#icon-Flutter</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-collected"></use>
                </svg>
                <div class="name">collected</div>
                <div class="code-name">#icon-collected</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-folder"></use>
                </svg>
                <div class="name">folder</div>
                <div class="code-name">#icon-folder</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Collect"></use>
                </svg>
                <div class="name">Collect</div>
                <div class="code-name">#icon-Collect</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-collected1"></use>
                </svg>
                <div class="name">collected</div>
                <div class="code-name">#icon-collected1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-startcalculating"></use>
                </svg>
                <div class="name">start calculating</div>
                <div class="code-name">#icon-startcalculating</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-check_box_px"></use>
                </svg>
                <div class="name">check_box_px</div>
                <div class="code-name">#icon-check_box_px</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-check_box_outline_bl"></use>
                </svg>
                <div class="name">check_box_outline_bl</div>
                <div class="code-name">#icon-check_box_outline_bl</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-radio_button_uncheck"></use>
                </svg>
                <div class="name">radio_button_uncheck</div>
                <div class="code-name">#icon-radio_button_uncheck</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-radio_button_checked"></use>
                </svg>
                <div class="name">radio_button_checked</div>
                <div class="code-name">#icon-radio_button_checked</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-startcalculating1"></use>
                </svg>
                <div class="name">start calculating</div>
                <div class="code-name">#icon-startcalculating1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-restore"></use>
                </svg>
                <div class="name">restore</div>
                <div class="code-name">#icon-restore</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-timeout"></use>
                </svg>
                <div class="name">time out</div>
                <div class="code-name">#icon-timeout</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-file-1"></use>
                </svg>
                <div class="name">file-1</div>
                <div class="code-name">#icon-file-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Check"></use>
                </svg>
                <div class="name">Check</div>
                <div class="code-name">#icon-Check</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Cross"></use>
                </svg>
                <div class="name">Cross</div>
                <div class="code-name">#icon-Cross</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Upload"></use>
                </svg>
                <div class="name">Upload</div>
                <div class="code-name">#icon-Upload</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-file1"></use>
                </svg>
                <div class="name">file</div>
                <div class="code-name">#icon-file1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Batchselection"></use>
                </svg>
                <div class="name">Batch selection</div>
                <div class="code-name">#icon-Batchselection</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-customize"></use>
                </svg>
                <div class="name">customize</div>
                <div class="code-name">#icon-customize</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sorter_down"></use>
                </svg>
                <div class="name">sorter_down</div>
                <div class="code-name">#icon-sorter_down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sorter_up"></use>
                </svg>
                <div class="name">sorter_up</div>
                <div class="code-name">#icon-sorter_up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-constant"></use>
                </svg>
                <div class="name">constant</div>
                <div class="code-name">#icon-constant</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
